<template>
	<view class="content">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"></uni-segmented-control>
		<view class="con">
			<view class="unit" v-show="current == 0">
				<geren></geren>
			</view>
			<view class="personal" v-show="current == 1">
				<danwei></danwei>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import danwei from './danwei.vue';
	import geren from './geren.vue';
	export default {
		data() {
			return {
				items: [{
						title: '个人养犬办牌',
						src: '../../static/img/geren2.png'
					},
					{
						title: '单位养犬办牌',
						src: '../../static/img/danwei.png'
					}
				],
				current: 0 //选项卡 选中
			};
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			}
		},
		onShow() {
			try {
				let value = uni.getStorageSync('nianjianData');
				console.log(JSON.parse(value));
				this.current = Number(JSON.parse(value).atype);
			} catch (e) {
				console.log("获取失败！！！")
				// error
			}
		},
		components: {
			uniSegmentedControl,
			danwei,
			geren
		}
	};
</script>

<style lang="scss">
	.content {
		.con {
			font-size: 26upx;
			// .unit {
			padding: 20upx;

			.title {
				text-align: center;
				font-size: 28upx;
				font-weight: 700;
				margin-bottom: 20upx;
				padding-top: 50upx;
			}

			input {
				color: $chong-text-color;
				font-size: 24upx;
				margin: 10upx 0;
				padding: 4upx 20upx;

				border: {
					radius: 10upx;
					style: solid;
					width: 1upx;
					color: rgba($chong-text-color, 0.2);
				}

				background: white;
			}

			radio-group {
				padding: 20upx 0;

				label {
					.uni-radio-input-checked {
						background-color: $chong-iconbg-color !important;
					}

					padding: 0 10upx;
				}
			}

			/* 上传 */
			.uni-uploader {
				flex: 1;
				flex-direction: column;
				width: 100%;
			}

			.uni-uploader-info {
				color: #b2b2b2;
			}

			.uni-uploader-body {
				margin-top: 16upx;
			}

			.uni-uploader__files {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.uni-uploader__file {
				width: 208upx;
				height: 208upx;
				margin: 10px auto;
			}

			.uni-uploader__img {
				display: block;
				width: 208upx;
				height: 208upx;
			}

			.uni-uploader__input-box {
				position: relative;
				margin: 10upx auto;
				width: 208upx;
				height: 208upx;
				border: 2upx solid #d9d9d9;
			}

			.uni-uploader__input-box:before,
			.uni-uploader__input-box:after {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				background-color: #d9d9d9;
			}

			.uni-uploader__input-box:before {
				width: 4upx;
				height: 79upx;
			}

			.uni-uploader__input-box:after {
				width: 79upx;
				height: 4upx;
			}

			.uni-uploader__input-box:active {
				border-color: #999999;
			}

			.uni-uploader__input-box:active:before,
			.uni-uploader__input-box:active:after {
				background-color: #999999;
			}

			.uni-uploader__input {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.uni-uploader__file,
			.uni-uploader__input-box {
				width: 50%;
			}

			.close-view {
				text-align: center;
				line-height: 14px;
				height: 16px;
				width: 16px;
				border-radius: 50%;
				background: #ff5053;
				color: #ffffff;
				position: absolute;
				top: -6px;
				right: -4px;
				font-size: 12px;
			}

			.picBox>view {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			// }
			// 		.personal {
			// 		}
		}

		.wenzi {
			margin: 40upx 0;
			line-height: 40upx;
			font-size: 16upx;
			text-align: center;
			color: #888888;
		}

		.btn {
			padding: 50upx 0;
			margin: 0 140upx;
		}
	}

	.huang {
		color: $chong-iconbg-color;
	}
</style>
